<!-- <template>
  <el-calendar>
    <template #date-cell="{ data }">
      <p :class="data.isSelected ? 'is-selected' : ''">
        {{ data.day.split('-').slice(1).join('-') }}
        {{ data.isSelected ? '✔️' : '' }}
      </p>
    </template>
  </el-calendar>
</template>

<style>
.is-selected {
  color: #1989fa;
}
</style> -->
<template>
  <div class="container">
    <!-- 顶部导航栏（假设已有面包屑导航，此处省略，如有需要可参考之前的示例补充） -->

    <!-- 日历部分 -->
    <el-calendar :default-value="defaultDate" @date-click="handleDateClick">
      <template #dateCell="{ date, data }">
        <div
          :class="['date-cell', data.isHoliday ? 'holiday' : 'workday']"
          @click="handleDateClick(date)"
        >
          {{ date.getDate() }}
          <span v-if="data.isHoliday">休</span>
          <span v-else>班</span>
        </div>
      </template>
    </el-calendar>

    <!-- 编辑弹窗 -->
    <el-dialog title="编辑" :visible="dialogVisible" @close="dialogVisible = false">
      <el-form :model="form">
        <el-form-item label="日期">
          <el-input v-model="form.exact_date" readonly></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="work_status">
          <el-radio-group v-model="form.work_status">
            <el-radio label="1">休</el-radio>
            <el-radio label="0">班</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { format } from 'date-fns'
import moment from 'moment'

// 初始化默认日期（当前月）
const defaultDate = computed(() => new Date())

// 弹窗状态
const dialogVisible = ref(false)

// 表单数据（对应数据库字段）
const form = reactive({
  holidaysid: null, // 假期设置主键（新增时为 null，编辑时从后端获取）
  exact_date: '',
  work_status: '1', // 默认休假（1为休，0为班，根据实际业务调整默认值）
  year: null,
  month: null,
  tenant_id: null // 租户/公司id（根据实际业务获取，此处假设为空，需从登录态或其他地方获取）
})

// 模拟从后端获取假期数据（实际需调用 API）
const holidayData = ref([]) // 假设格式为 [{ exact_date: '2025-06-02', work_status: 1 },...]

// 日期点击事件
const handleDateClick = (date) => {
  const selectedDate = format(date, 'yyyy-MM-dd')
  form.exact_date = selectedDate
  form.year = parseInt(format(date, 'yyyy'))
  form.month = parseInt(format(date, 'MM'))

  // 检查是否有该日期的假期数据（模拟，实际需查询 API）
  const existingHoliday = holidayData.value.find((item) => item.exact_date === selectedDate)
  if (existingHoliday) {
    form.work_status = existingHoliday.work_status.toString()
    form.holidaysid = existingHoliday.holidaysid
  } else {
    form.work_status = '1' // 默认休假（可根据业务调整）
    form.holidaysid = null
  }

  dialogVisible.value = true
}

// 提交表单（模拟，实际需调用 API 保存数据）
const handleSubmit = () => {
  // 构建请求数据
  const requestData = {
    holidaysid: form.holidaysid,
    exact_date: form.exact_date,
    work_status: parseInt(form.work_status),
    year: form.year,
    month: form.month,
    tenant_id: form.tenant_id // 补充实际获取方式
  }

  // 调用 API 保存数据（此处需使用 axios 等库，假设 API 接口为 /api/holiday/save）
  // 示例（需安装 axios：npm install axios）
  // import axios from 'axios';
  // axios.post('/api/holiday/save', requestData)
  // .then(response => {
  //     if (response.data.success) {
  //       // 更新 holidayData
  //       if (requestData.holidaysid) {
  //         const index = holidayData.value.findIndex(item => item.holidaysid === requestData.holidaysid);
  //         holidayData.value[index] = requestData;
  //       } else {
  //         holidayData.value.push(requestData);
  //       }
  //       dialogVisible.value = false;
  //     } else {
  //       // 处理错误
  //     }
  //   })
  // .catch(error => {
  //     console.error(error);
  //   });

  // 模拟成功（测试用）
  console.log('提交成功', requestData)
  dialogVisible.value = false
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.date-cell {
  padding: 10px;
  text-align: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.holiday {
  background-color: #ffcccc; /* 休假背景色（红色系示例） */
}

.workday {
  background-color: #ccffcc; /* 上班背景色（绿色系示例） */
}
</style>
